<template>
	<div ref="contentRef" class="content">
		<div class="art_list">
			<div class="search">
				<input
					v-model="payload.title"
					type="text"
					class="search_input"
					placeholder="请输入文章名称"
					@keyup.enter="queryArticleList"
				/>
				<img
					v-show="payload.title"
					src="@/assets/img/icon/clear.svg"
					alt="重置"
					class="clear"
					@click="hanelClearClick"
				/>
				<button class="search_btn" @click="queryArticleList">搜 索</button>
			</div>
			<template v-for="item in artList" :key="item.id">
				<ListCard :item="item" @card-click="handleItemClick" />
			</template>
			<!-- <Pagination :total="10" /> -->
			<div class="pager">
				<ElPagination
					v-model:page-size="page.pageSize"
					background
					layout="prev, pager, next"
					:total="listCount"
					@current-change="onCurrentChange"
				/>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import ListCard from '@/components/ListCard'
// import Pagination from '@/components/Pagination'
import { ElPagination } from 'element-plus'
import { selectArticleList } from '@/service/content'

const offsetTop = ref(0)
const contentRef = ref()
onMounted(() => {
	offsetTop.value = contentRef.value.offsetTop
})

const artList = ref([])
const listCount = ref(0)
const payload = ref<any>({})
const page = ref({
	pageNum: 1,
	pageSize: 5
})
async function queryArticleList() {
	const { list, total } = await selectArticleList({ ...page.value, ...payload.value })
	artList.value = list
	listCount.value = total
}
queryArticleList()
function hanelClearClick() {
	payload.value.title = ''
	page.value.pageNum = 1
	queryArticleList()
}

async function onCurrentChange(pageNum: number) {
	page.value.pageNum = pageNum
	queryArticleList()
	await nextTick()
	window.scrollTo(0, offsetTop.value - 50)
}

const router = useRouter()
function handleItemClick(item: any) {
	const bar = router.resolve({
		name: 'detail',
		query: { infoId: item.id }
	})
	window.open(bar.href, '_blank')
}
</script>

<style lang="less" scoped>
@import url('@/assets/css/constants.less');

.content {
	display: flex;
	justify-content: center;
	// padding-bottom: 100px;
	.art_list {
		width: 900px;
		height: 100%;
		border-radius: 20px;
		padding: 40px 80px;
		background: @cardBackGround;
		backdrop-filter: @backdropFilter;
		border-radius: @borderRadius;
		box-shadow: @boxShadow;
	}
}
.search {
	display: flex;
	position: relative;
	width: 100%;
	margin-bottom: 40px;
	border-radius: 20px;
	overflow: hidden;
	.search_input {
		width: 100%;
		height: 40px;
		padding: 0 20px;
		font-size: 16px;
		border: none;
		outline: none;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border: 1px solid rgba(0, 0, 0, 0.5);
	}
	.clear {
		width: 18px;
		height: 18px;
		position: absolute;
		right: 110px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
	}
	.search_btn {
		width: 100px;
		padding: 0 15px;
		border: none;
		font-size: 16px;
		background: #3f5bfa;
		color: #fff;
		cursor: pointer;
	}
}

.pager {
	display: flex;
	justify-content: center;
}
</style>
